<template>
  <view class="report u-skeleton">
    <view class="report-header">
      <view class="report-header-title u-skeleton-fillet">
        {{ vuex_babyInfo.name }}宝宝{{ Info.name }}报告
      </view>
      <view class="process">
        <view class="u-skeleton-fillet"> {{ project }} </view>
        <u-line-progress
          :class="['u-skeleton-fillet']"
          :active-color="jugeHealth(Info.value)"
          inactive-color="#EEFFFA"
          round="true"
          :striped="true"
          :show-percent="false"
          :striped-active="false"
          :style="{ flex: 1 }"
          :percent="(Info.value / 5) * 100"
        ></u-line-progress>
        <view
          class="u-skeleton-fillet"
          :style="{ color: jugeHealth(Info.value) }"
        >
          {{ Info.value }}分
        </view>
      </view>

      <!-- <view class="report-notice">
        <image
          src="@/static/report/smile.png"
          class="smile u-skeleton-circle"
        />
        <view class="smile-content u-line-2 u-skeleton-fillet">
          宝宝整体的身体形态还不错，平时多注意
          正确的运动姿势，会更好哦，继续加油哦~
        </view>
      </view> -->
    </view>

    <!-- 身体部位 -->
    <view class="grid-layout">
      <view
        class="part u-skeleton-fillet"
        v-for="(item, index) in programList"
        :key="index"
        @click="partDetail(item)"
      >
        <view>
          <view class="program"> {{ item.name }}</view>
          <image src="@/static/index/right.png" class="prompt-style"></image>
        </view>

        <view class="value1" v-if="item.value == null">未检测</view>
        <view v-else>
          <view class="value"> {{ item.value }} </view>
          <view class="unit"> {{ item.unit == "无" ? "" : item.unit }} </view>
        </view>
      </view>
    </view>

    <!--引用组件-->
    <u-skeleton
      :loading="loading"
      :animation="true"
      bgColor="#FFF"
    ></u-skeleton>
  </view>
</template>

<script>
export default {
  data() {
    return {
      project: "身体形态",
      programList: [{}, {}, {}, {}, {}],
      Info: {},
      loading: true,
    };
  },
  methods: {
    /**
     * 设置新标题
     */
    setNavigationBar(Info) {
      this.project = Info.name;
      uni.setNavigationBarTitle({
        title: Info.name,
      });
      // uni.setNavigationBarColor({
      //   frontColor: "#000000", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
      //   backgroundColor: "#F0AD4E", //背景颜色值，有效值为十六进制颜色
      //   animation: {
      //     //动画效果
      //     duration: 400,
      //     timingFunc: "easeIn",
      //   },
      // });
    },
    /**
     * 各部分 报告详细
     */
    partDetail(Info) {
      console.log(Info)
      this.$u.vuex('vuex_lookReport',Info);
      this.$u.route("/pages/report/reportDetail");
    },

    /**
     * 根据检测分数来判断 是否健康
     * 0-2分：红
     *2-3分：橙
     *3-5分：绿
     */
    jugeHealth(score) {
      if (parseInt(score) >= 0 && 2 >= parseInt(score)) {
        //不健康 为红色
        return "#F37373";
      } else if (parseInt(score) === 3) {
        //橙色
        return "#ff9900";
      } else {
        return "#07C38F";
      }
    },
  },
  //请求数据
  onLoad(option) {
    this.Info = option;
    this.setNavigationBar(option);
    // 获取项目 以及数据 根据baby_Id  && health_item_group_id
    var form = {
      group_id: option.health_item_group_id,
      baby_id: this.vuex_babyInfo.baby_id,
    };
    this.$u.api.healthItemApi(form).then((res) => {
      this.programList = res.data;
      this.loading = false;
    });
  },
};
</script>

<style scoped lang ='scss' >
.report {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding: 20rpx;
  .report-header {
    height: 90 * 2rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 20rpx;
    .report-header-title {
      color: #000000;
      font-size: 36rpx;
      font-weight: Bold;
      font-family: SourceHanSansCN-Bold;
      margin-top: 10rpx;
    }
    .process {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin: 20rpx 0;
      & > view:nth-child(1) {
        width: 120rpx;
        color: #666666;
        font-size: 26rpx;
        font-weight: Regular;
        font-family: SourceHanSansSC-Regular;
        margin-right: 20rpx;
      }
      & > view:nth-child(3) {
        width: 50rpx;
        font-size: 20rpx;
        margin-left: 20rpx;
        font-weight: Regular;
        font-family: SourceHanSansCN-Regular;
      }
    }

    .report-notice {
      height: 59 * 2rpx;
      background-color: #eefffa;
      margin-top: 40rpx;
      padding: 10rpx;

      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .smile {
        width: 77rpx;
        height: 77rpx;
        margin-right: 20rpx;
      }
      .smile-content {
        flex: 1;
        font-size: 28rpx;
        color: #07c38f;
        font-family: SourceHanSansCN-Regular;
        font-weight: Regular;
      }
    }
  }
  .grid-layout {
    display: grid;
    display: grid;
    grid-template-columns: repeat(3, 107 * 2rpx);
    grid-template-rows: repeat(3, 95 * 2rpx);
    grid-gap: 20rpx 20rpx;
    justify-content: space-between;
    align-content: space-between;
    margin-top: 40rpx;
    & > view {
      background-color: #ffffff;
      border-radius: 20rpx;
      padding: 20rpx;
    }
    .part {
      .value1 {
        color: #07c38f;
        font-size: 35rpx;
        font-weight: Bold;
        margin-right: 5rpx;
      }
      & > view:nth-child(1) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .program {
          color: #666666;
          font-size: 28rpx;
        }
        .prompt-style {
          width: 14rpx;
          height: 23rpx;
          margin-right: 4rpx;
        }
      }

      & > view:nth-child(2) {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        margin-top: 35rpx;
        .value {
          color: #07c38f;
          font-size: 44rpx;
          font-weight: Bold;
          margin-right: 5rpx;
        }
        .unit {
          color: #07c38f;
          font-size: 20rpx;
        }
      }
    }
  }
}
</style>
